<template>
  <div class="mdh">页面效果</div>
  <div class="view" style="width: 150px">
    <oHeader :headerOptions="headerOptions" />
  </div>
  <div class="view">弹窗中最重要的属性为：</div>
  <CodeView :code="codeProperty" />
  <div class="mdh">顶部按钮区详细</div>
  <CodeView :code="code" />
</template>
<script setup lang="tsx">
import { oHeader } from 'oneui'
import { AddUserDialog } from '~/popup/user'
const codeProperty = `
调用oDialog.open传入hooks，内部按照表单格式传递columns
columns:[],// 【可选】搜索字段，同表单字段一样，详见【表单组件字段说明】
title: "", // 【必填】弹窗标题
height: "500px", // 【可选】弹窗默认宽度
width: "500px", // 【可选】弹窗默认宽度
submit: true, // 【可选】是否显示提交按钮
cancel: true,// 【可选】是否显示取消按钮
labelWidth: this.isCn ? "100px" : "120px", // 【可选】中英默认宽度不同
onSubmit, // 【回调】校验成功的回调
onValidError, // 【回调】校验失败的回调
onCancel  // 【回调】关闭弹出触发的回调
【可主动验证】传字段数组 app.validate(['age']) 校验某些字段，结果会走onSubmit、onValidError
【可清理验证】传字段数组 app.clearValidate(['age']) 可传某些字段或者不传就是全部
`
const code = `
import { oDialog } from "oneui/index";
import { onMounted, onUnmounted } from "vue";

export const AddUserDialog = () => {
  const app = oDialog.open(() => {
    const checkAge = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("请填写真实自定义名称"));
      }
      callback();
    };
    const dialogOptions = {
      title: "添加",
      width: 400,
      columns: [
        {
          prop: "agent",
          placeholder: "请输入直属分组",
          comtype: "input",
          label: "直属分组",
          require: true,
          rules: [{ validator: checkAge, trigger: "blur" }], // 自定义验证规则
        },
        {
          prop: "name",
          placeholder: "请输入账号",
          comtype: "input",
          require: true,
          label: "用户账号",
        },
      ],
    };

    const onSubmit = async (formData: any) => {
      console.log("onSubmit", formData);
      await new Promise((r) => setTimeout(r, 2000));
    };

    onMounted(() => {
      console.log("mounted生命周期");
    });
    onUnmounted(() => {
      console.log("unmounted生命周期");
    });

    return {
      dialogOptions,
      onSubmit, // 【回调】校验成功的回调
      // onValidError, // 【回调】校验失败的回调
      // onCancel  // 【回调】关闭弹出触发的回调
      // 【可主动验证】传字段数组 app.validate(['age']) 校验某些字段，结果会走onSubmit、onValidError
      // 【可清理验证】传字段数组 app.clearValidate(['age']) 可传某些字段或者不传就是全部
    };
  });
};

`
const formData = reactive({})
provide('formData', formData)
const eventData = reactive({})
provide('eventData', eventData)
const headerOptions = computed(() => {
  return {
    columns: [
      // 常规按钮，带点击事件
      {
        comtype: 'button',
        label: '添加用户',
        onClick() {
          AddUserDialog()
        }
      }
    ]
  }
})
</script>
